<template>
  <div>
      <top-bar></top-bar>
      <left-bar :datas='data'></left-bar>
      <div class="system">
           <home-bar :currentPage='currentPage'></home-bar>
             <div class="system-main">
                 <div class="main-position">
                     首页  >   财富管理
                     <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                 </div>
                 <div class="main-height"></div>
                 <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/wealthmain" @click.native="addPath('/wealthmain','财富管理')">
                                <li  class="active">主页</li>
                            </router-link>
                            <router-link to="/balancedetail" @click.native="addPath('/balancedetail','财富管理')">
                                <li>余额明细</li>
                            </router-link>
                            <router-link to="/integraldetail" @click.native="addPath('/integraldetail','财富管理')">
                                <li>积分明细</li>
                            </router-link>
                            <router-link to="/redenvelopedetail" @click.native="addPath('/redenvelopedetail','财富管理')">
                                <li>红包明细</li>
                            </router-link>
                            <router-link to="/rechargedetail" @click.native="addPath('/rechargedetail','财富管理')">
                                <li>充值明细</li>
                            </router-link>
                            <router-link to="/withdrawaldetail" @click.native="addPath('/withdrawaldetail','财富管理')">
                                <li>提现明细</li>
                            </router-link>
                            <router-link to="/rolloutdetail" @click.native="addPath('/rolloutdetail','财富管理')">
                                <li>转出明细</li>
                            </router-link>
                            <router-link to="/loandetail" @click.native="addPath('/loandetail','财富管理')">
                                <li>贷款明细</li>
                            </router-link>
                            <router-link to="/informationcostsdetail" @click.native="addPath('/informationcostsdetail','财富管理')">
                                <li>信息费明细</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="wealthMain clear">
                        <div class="w33 w33-border-r fl">
                          <div class="w33-top">
                            <span class="fl">账户余额</span>
                            <img class="fr" v-if="wealthHiddens"    @click="wealthHidden()"   src="../../images/visual.png" alt="">
                            <img class="fr" v-else    @click="wealthHidden()"  :style="{marginTop:'20px;'}"    src="../../images/wealthMain-06.png" alt="">
                          </div>
                          <div class="w33-con">
                              <img src="../../images/wealthMain-01.png" alt="">
                              <div class="w33-txt" v-if="wealthHiddens">
                                ￥1680.<span>00</span>万
                              </div>
                               <div class="w33-txt" v-else>
                                ********
                              </div>
                              <div class="wealthMain-operation clear">
                                  <div  :class="{active:wealthshow1 || wealthshow2,fl:true}"    @click="withdrawals()"   >提现</div>
                                  <div class="fl"  :class="{active:wealthshow3 ,fl:true}"   @click="recharge()" >充值</div>
                                  <div class="fl"   :class="{active:wealthshow4 || wealthshow5  ,fl:true}"  @click="transfer()">转账</div>
                              </div>
                          </div>
                        </div>
                        <div class="w33 w33-borders fl">
                          <div class="w33-top">
                            <span class="fl">红包奖励</span>
                            <router-link to="/redenvelopedetail">
                              <span class="fr">明细 ></span>
                            </router-link>
                          </div>
                          <div class="w33-con">
                              <img src="../../images/wealthMain-02.png" alt="">
                              <div class="w33-txt">
                                26<span>个</span>
                              </div>
                              <div class="wealthMain-operations wealthMain-operation">
                                  <div>一键领取</div>
                              </div>
                          </div>
                        </div>
                        <div class="w33 w33-border-l  fl">
                          <div class="w33-top">
                            <span class="fl">银行卡管理</span>
                            <span class="fr">更多 ></span>
                          </div>
                          <div class="w33-con">
                            <div class="bank-cards-con">
                              <div class="bank-card" v-for="(item,index) in cards" :key="index"  :class="{active:cardsId==index,activeNext:cardsId==(index-1),activePrev:cardsId==(index+1)}" >
                                <div class="bank-cards">
                                  <div class="bank-card-t">{{item.bank}}</div>
                                  <div class="bank-card-m">卡号</div>
                                  <div class="bank-card-n">{{item.card}}
                                    <img  class="fr"  src="../../images/wealthMain-07.png" alt="">
                                  </div>
                                </div>
                                <div class="bank-card-next"></div>
                                <div class="bank-card-nexts"></div>
                              </div>
                            </div>
                            <div class="bank-card-num">
                                {{this.cardsId + 1}}/4
                            </div>
                            <div class="bank-card-btn" @click="addCard()">
                                添加
                            </div>
                            <div class="bank-card-left"  @click="bankLeft()" >
                              <i class="el-icon-arrow-left"></i>
                            </div>
                            <div class="bank-card-right" @click="bankRight()">
                              <i class="el-icon-arrow-right"></i>
                            </div>
                          </div>
                        </div>
                    </div>
                    <div id="wealthMain1">

                    </div>
                    <div class="wealthMain-bottom clear">
                        <div class="wealthMain-bottoms wealthMain-bottoms1 fl">
                            <div class="w33-top">
                              <span>当前积分</span>
                              <span class="fr wealthMain-donation" @click="donation()">转赠</span>
                            </div>
                            <div class="wealthMains-bottoms">
                              <div class="wealthMains-bottomss clear">
                                <div class="fl wealthMains-bottomss-l">积分总额：</div>
                                <div class="fl wealthMains-bottomss-r">1680888<span>分</span></div>
                              </div>
                              <div class="clear wealthMains-integral">
                                  <div class="fl wealthMains-integrals">等待被转化成红包</div>
                                  <div class="fl wealthMains-integralss">
                                    <el-progress :percentage="70" status="exception" color="#f65b8a" ></el-progress>
                                  </div>
                                  <div class="fl wealthMains-integrals wealthMains-r">10000分</div>
                              </div>
                              <div class="clear wealthMains-integral">
                                  <div class="fl wealthMains-integrals">已转化成红包</div>
                                  <div class="fl wealthMains-integralss">
                                    <el-progress :percentage="70" status="exception" color="#74a3f2" ></el-progress>
                                  </div>
                                  <div class="fl wealthMains-integrals wealthMains-r">5000分</div>
                              </div>
                              <div class="clear wealthMains-integral">
                                  <div class="fl wealthMains-integrals">已冻结</div>
                                  <div class="fl wealthMains-integralss">
                                    <el-progress :percentage="70" status="exception" color="#a0a0a0" ></el-progress>
                                  </div>
                                  <div class="fl wealthMains-integrals wealthMains-r">500分</div>
                              </div>
                            </div>
                        </div>
                        <div class="wealthMain-bottoms wealthMain-bottoms2 fl" id='wealthMain2'>

                        </div>
                    </div>
                 </div>
             </div> 
            <div class="system-menban" v-if="wealthshow1 || wealthshow2 || wealthshow3 || wealthshow4 || wealthshow5 || wealthshow6 || wealthshow7 || wealthshow8 || wealthshow9 || wealthshow10">
            </div>
            <div class="systemPopup" v-if="wealthshow1">
               <div class="topTitle">
                     <span>提现</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">选择银行卡</div>
                        <div class="fl systemPopup-con1-i">
                          <el-select v-model="value" placeholder="请选择类型" class="system-recommend-sel"  >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">提现金额</div>
                        <div class="fl systemPopup-con1-i">    
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="promptMoney"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl">元</div>
                    </div> 
                    <div class="systemPopup-prompt">需扣除手续费¥00.00元</div>
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">到账时间</div>
                        <div class="fl systemPopup-con1-ts">
                            <div>
                              <el-radio v-model="radio" label="1">24小时到账7%手续费</el-radio>
                            </div>
                            <div>
                              <el-radio v-model="radio" label="2">48小时到账5%手续费</el-radio>
                            </div>
                            <div>
                              <el-radio v-model="radio" label="3">7天到账3%手续费</el-radio>
                            </div>
                        </div>
                    </div> 
                    <div class="systemPopup-btn systemPopup-btns"  @click="withdrawalss()" >
                      下一步
                    </div>
                </div>
            </div> 
            <div class="systemPopup" v-if="wealthshow2">
               <div class="topTitle">
                     <span>确认提现信息</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">银行卡信息：</div>
                        <div class="fl systemPopup-con1-is">
                          <div class="systemPopup-con1-is-name">诸葛亮</div>
                          <div>交通银行（2356 **** ****6885）</div>
                        </div>
                    </div>
                    <div class="systemPopup-con1 systemPopup-con2 systemPopup-con2-money clear">
                        <div class="fl systemPopup-con1-t">提现金额：</div>
                        <div class="fl systemPopup-con1-is">
                            <span>6862.</span><em>02</em>元
                        </div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2 clear">
                        <div class="fl systemPopup-con1-t">到账时间：</div>
                        <div class="fl systemPopup-con1-is">
                            预计04月26日24点前
                        </div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2  clear">
                        <div class="fl systemPopup-con1-t">支付密码：</div>
                        <div class="fl systemPopup-con1-ts systemPopup-con1-password">
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                        </div>
                        <div class="systemPopup-payment-safe fl">
                            <img src="../../images/wealthMain-05.png" alt="">
                            安全保障中
                        </div>
                    </div> 
                    <div class="systemPopup-payment-safe-t">请输入6位支付密码</div>
                    <div class="systemPopup-payment-n clear">
                        <div class="systemPopup-btn fl">
                          确认提现
                        </div>
                         <div class="systemPopup-btn fl" @click="withdrawals()"  >
                          返回修改
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="systemPopup" v-if="wealthshow3">
                <div class="topTitle">
                     <span>充值到余额</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">选择银行卡</div>
                        <div class="fl systemPopup-con1-i">
                          <el-select v-model="value" placeholder="请选择类型" class="system-recommend-sel"  >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">充值金额</div>
                        <div class="fl systemPopup-con1-i">    
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="promptMoney"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl">元</div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2  clear" :style="{ marginTop: '20px'}"  >   
                        <div class="fl systemPopup-con1-t">支付密码：</div>
                        <div class="fl systemPopup-con1-ts systemPopup-con1-password">
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                        </div>
                        <div class="systemPopup-payment-safe fl">
                            <img src="../../images/wealthMain-05.png" alt="">
                            安全保障中
                        </div>
                    </div> 
                    <div class="systemPopup-payment-safe-t">请输入6位支付密码</div>
                    <div class="systemPopup-payment-n clear">
                        <div class="systemPopup-btn fl" :style="{ marginLeft: '200px'}" >
                          确认充值
                        </div>
                    </div>
                </div>
            </div>
            <div class="systemPopup"  v-if="wealthshow4" >
               <div class="topTitle">
                     <span>转账</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">支付方式</div>
                        <div class="fl systemPopup-con1-i">
                          <el-select v-model="value" placeholder="选择银行卡/余额支付" class="system-recommend-sel"  >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                      <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">收款人账号</div>
                        <div class="fl systemPopup-con1-i">    
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="promptMoney"
                                placeholder="收款人账号/手机号"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl">元</div>
                    </div> 
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">转账金额</div>
                        <div class="fl systemPopup-con1-i">    
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="promptMoney"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl">元</div>
                    </div> 
                    <div class="systemPopup-prompt">需扣除手续费¥00.00元</div>
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">到账时间</div>
                        <div class="fl systemPopup-con1-ts">
                            <div>
                              <el-radio v-model="radio" label="1">24小时到账7%手续费</el-radio>
                            </div>
                            <div>
                              <el-radio v-model="radio" label="2">48小时到账5%手续费</el-radio>
                            </div>
                            <div>
                              <el-radio v-model="radio" label="3">7天到账3%手续费</el-radio>
                            </div>
                        </div>
                    </div> 
                    <div class="systemPopup-btn systemPopup-btns" @click="transfers()">
                      下一步
                    </div>
                </div>
            </div> 
            <div class="systemPopup"  v-if="wealthshow5">
               <div class="topTitle">
                     <span>确认转账信息</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">银行卡信息：</div>
                        <div class="fl systemPopup-con1-is">
                          <div class="systemPopup-con1-is-name">诸葛亮</div>
                          <div>交通银行（2356 **** ****6885）</div>
                        </div>
                    </div>
                    <div class="systemPopup-con1 systemPopup-con2 systemPopup-con2-money clear">
                        <div class="fl systemPopup-con1-t">提现金额：</div>
                        <div class="fl systemPopup-con1-is">
                            <span>6862.</span><em>02</em>元
                        </div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2 clear">
                        <div class="fl systemPopup-con1-t">到账时间：</div>
                        <div class="fl systemPopup-con1-is">
                            预计04月26日24点前
                        </div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2  clear">
                        <div class="fl systemPopup-con1-t">支付密码：</div>
                        <div class="fl systemPopup-con1-ts systemPopup-con1-password">
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                        </div>
                        <div class="systemPopup-payment-safe fl">
                            <img src="../../images/wealthMain-05.png" alt="">
                            安全保障中
                        </div>
                    </div> 
                    <div class="systemPopup-payment-safe-t">请输入6位支付密码</div>
                    <div class="systemPopup-payment-n clear">
                        <div class="systemPopup-btn fl">
                          确认提现
                        </div>
                         <div class="systemPopup-btn fl" @click="transfer()">
                          返回修改
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="systemPopup"  v-if="wealthshow6">
               <div class="topTitle">
                    <span>确认转账信息</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con transferS">
                    <img src="../../images/transferS.png" alt="">
                    <div class="transferS-t">
                      转账成功
                    </div>
                    <div class="transferS-t-s">
                      预计24小时内到账
                    </div>
                    <div class="transferS-btn">
                        返回首页
                    </div>
                </div>
            </div>
            <div class="systemPopup"  v-if="wealthshow7">
               <div class="topTitle">
                    <span>积分转赠</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con ">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">对方账户</div>
                        <div class="fl systemPopup-con1-i">
                          <el-select v-model="value" placeholder="" class="system-recommend-sel"  >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">积分数</div>
                        <div class="fl systemPopup-con1-i">    
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="promptMoney"
                                placeholder="收款人账号/手机号"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl">分</div>
                    </div> 
                    <div class="systemPopup-btn systemPopup-btns" @click="donations()">
                      下一步
                    </div>
                </div>
            </div>
            <div class="systemPopup" v-if="wealthshow8">
               <div class="topTitle">
                     <span>确认积分转赠信息</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-con1 clear">
                        <div class="fl systemPopup-con1-t">收款人信息：</div>
                        <div class="fl systemPopup-con1-is">
                          <div class="systemPopup-con1-is-name">诸葛亮</div>
                          <div>18607736956</div>
                        </div>
                    </div>
                    <div class="systemPopup-con1 systemPopup-con2 systemPopup-con2-money clear">
                        <div class="fl systemPopup-con1-t">转赠积分：</div>
                        <div class="fl systemPopup-con1-is">
                            <span>6862.</span><em>02</em>分
                        </div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2 clear">
                        <div class="fl systemPopup-con1-t">到账时间：</div>
                        <div class="fl systemPopup-con1-is">
                            预计04月26日24点前
                        </div>
                    </div> 
                    <div class="systemPopup-con1 systemPopup-con2  clear">
                        <div class="fl systemPopup-con1-t">支付密码：</div>
                        <div class="fl systemPopup-con1-ts systemPopup-con1-password">
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                            <input type="text" >
                        </div>
                        <div class="systemPopup-payment-safe fl">
                            <img src="../../images/wealthMain-05.png" alt="">
                            安全保障中
                        </div>
                    </div> 
                    <div class="systemPopup-payment-safe-t">请输入6位支付密码</div>
                    <div class="systemPopup-payment-n clear">
                        <div class="systemPopup-btn fl">
                          确认转赠
                        </div>
                         <div class="systemPopup-btn fl" @click="donation()"  >
                          返回修改
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="systemPopup" v-if="wealthshow9">
                <div class="topTitle">
                     <span>添加银行卡</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con systemPopup-cards">
                  <div class="systemPopup-car">
                    <div class="systemPopup-cardss">
                        <div class="bank-cards">
                            <div class="bank-card-t">{{bank}}</div>
                            <div class="bank-card-num">{{cardNum1}} {{cardNum2}} {{cardNum3}} {{cardNum4}}</div>
                            <div class="bank-card-n clear">
                              <span class="fl">持卡人</span>
                              <span class="fr">到期</span>
                            </div>
                            <div class="bank-card-ts clear">
                              <span class="fl">{{cardsName}}</span>
                              <span class="fr">{{months}}/{{year}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="systemPopup-cardsss">
                        <div class="systemPopup-cardss-bj"></div>
                        <div class="systemPopup-cardss-ccv">
                          <div class="systemPopup-cardss-ccv-t">ccv</div>
                          <div class="systemPopup-cardss-ccv-b">{{CCV}}</div>
                        </div>
                    </div>
                  </div>
                      <div class="bank-cards-m">
                        <p class="bank-cards-m-mar">卡号</p>
                        <div class="bank-cards-i clear">
                          <input type="text"  oninput="this.value=(this.value.replace(/[^0-9]+/,''))"  maxlength="4" v-model="cardNum1"  ref="input1">
                          <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))"   maxlength="4" v-model="cardNum2" ref="input2">
                          <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="4" v-model="cardNum3" ref="input3">
                          <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="4" v-model="cardNum4" ref="input4">
                        </div>
                      </div>
                      <div class="bank-cards-ms">
                        <p class="bank-cards-m-mar">选择银行</p>
                        <div class="bank-cards-i">
                            <el-select v-model="bank"  class="system-cards-sel"  >
                                <el-option
                                v-for="item in bankDdata"
                                :key="item.value"
                                :value="item.bank">
                                </el-option>
                            </el-select>
                        </div>
                      </div>
                      <div class="bank-cards-name">
                        <p class="bank-cards-m-mar">持卡人</p>
                        <div class="bank-cards-i">
                          <el-input v-model="cardsName" class="bank-cards-ms-i-ts" ></el-input>
                        </div>
                      </div>
                      <div class="bank-cards-ms clear">
                        <div class="fl">
                          <p class="bank-cards-m-mar">到期日</p>
                          <div class="bank-cards-ms-i clear">
                            <el-select v-model="months" class="system-cards-sels"  >
                                <el-option
                                v-for="item in dateData.month"
                                :key="item.value"
                                :value="item.months">
                                </el-option>
                            </el-select>
                            <el-select v-model="year"  class="system-cards-sels"  >
                                <el-option
                                v-for="item in dateData.year"
                                :key="item.value"
                                :value="item.year">
                                </el-option>
                            </el-select>
                          </div>
                        </div>
                        <div class="fr bank-cards-ms-i-t">
                          <p class="bank-cards-m-mar">CCV</p>
                          <el-input v-model="CCV" class="bank-cards-ms-i-ts" ></el-input>
                        </div>
                      </div>
                      <div class="bank-cards-btn">确定</div>
                </div>
            </div>
             <div class="systemPopup" v-if="wealthshow10">
                <div class="topTitle">
                     <span>银行卡管理</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con systemPopup-card-manage">
                    <div class="systemPopup-card-manages">
                        <div class="systemPopup-card-manages-top">
                          <span class="fl">您的银行卡</span>
                          <span class="fr add" @click="cardAdd()" >添加</span>
                        </div>
                         <el-checkbox-group v-model="cardList">
                           <div class="systemPopup-card-remove fl   systemPopup-card-l">
                              <div class="card-top">
                                <el-checkbox label="上海浦东发展银行"></el-checkbox>
                                <img src="../../images/bank1.png" alt="">
                                <span>上海浦东发展银行</span>
                              </div>
                              <div class="card-number">
                                6222 **** **** 1668
                              </div>
                              <div class="card-tr1">
                                <span>信用卡</span>
                              </div>
                           </div>
                           <div class="systemPopup-card-remove fl ">
                              <div class="card-top">
                                <el-checkbox label="桂林银行"></el-checkbox>
                                <img src="../../images/bank1.png" alt="">
                                <span>桂林银行</span>
                              </div>
                              <div class="card-number">
                                6222 **** **** 5856
                              </div>
                              <div class="card-tr2">
                                <span>借记卡</span>
                              </div>
                           </div>
                          </el-checkbox-group>
                      </div>
                    <div class="bank-cards-btn bank-cards-btns">解绑</div>
                </div>
            </div>
       </div>
  </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "wealthManagement",
      currentPage: { path: "/wealthmain", name: "财富管理" },
      radio: "1",
      value: "",
      wealthHiddens: true, //显示账户余额
      promptMoney: "", //提现金额
      wealthshow1: false, //提现
      wealthshow2: false, //确认提现
      wealthshow3: false, //充值到余额
      wealthshow4: false, //转账
      wealthshow5: false, //确认转账信息
      wealthshow6: false, //转账成功
      wealthshow7: false, //积分转赠
      wealthshow8: false, //确认积分转赠
      wealthshow9: false, //添加银行卡
      wealthshow10:false,  //银行卡管理
      cards: [
        {
          bank: "上海浦东发展银行",
          card: "0122 **** **** 0803"
        },
        {
          bank: "桂林银行",
          card: "6862 **** **** 2523"
        },
        {
          bank: "中国银行",
          card: "5632 **** **** 4532"
        },
        {
          bank: "平安银行",
          card: "4562 **** **** 7825"
        }
      ],
      cardsId: 0,
      bankDdata: [
        {
          value: "1",
          bank: "上海浦东发展银行"
        },
        {
          value: "2",
          bank: "桂林银行"
        },
        {
          value: "3",
          bank: "中国银行"
        },
        {
          value: "4",
          bank: "平安银行"
        },
        {
          value: "5",
          bank: "兴业银行"
        }
      ],
      bank: "", //增加银行卡中的选择银行
      months: "", //增加银行卡中的选择月份
      year: "", //增加银行卡中的选择年限
      CCV: "", //增加银行卡中的ccv
      cardsName: "", //增加银行卡中的持卡人
      dateData: {
        month: [
          {
            value: "1",
            months: "01"
          },
          {
            value: "2",
            months: "02"
          },
          {
            value: "3",
            months: "03"
          },
          {
            value: "4",
            months: "04"
          },
          {
            value: "5",
            months: "05"
          },
          {
            value: "6",
            months: "06"
          },
          {
            value: "7",
            months: "07"
          },
          {
            value: "8",
            months: "08"
          },
          {
            value: "9",
            months: "09"
          },
          {
            value: "10",
            months: "10"
          },
          {
            value: "11",
            months: "11"
          },
          {
            value: "12",
            months: "12"
          }
        ],
        year: [
          {
            value: "1",
            year: "2018"
          },
          {
            value: "2",
            year: "2019"
          },
          {
            value: "3",
            year: "2020"
          },
          {
            value: "4",
            year: "2021"
          },
          {
            value: "5",
            year: "2022"
          },
          {
            value: "6",
            year: "2023"
          }
        ]
      },
      cardNum1: "", //增加银行卡中的银行卡账号
      cardNum2: "",
      cardNum3: "",
      cardNum4: "",
      cardList:[]
    };
  },
  mounted() {
    this.wealthMain();
    this.wealthMains();
  },
  methods: {
    //账户余额数字隐藏
    wealthHidden() {
      this.wealthHiddens = this.wealthHiddens ? false : true;
    },
    wealthMain() {
      let balanceEchart = echarts.init(document.getElementById("wealthMain1"));
      let option = {
        tooltip: {
          trigger: "axis"
        },
        title: {
          text: "24小时余额数据",
          subtext: "单位：千元",
          x: "left",
          align: "right"
        },
        color: ["#2061f4"], //线条颜色
        toolbox: {
          //右上角切换按钮
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00"
          ]
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "￥{value} k"
            }
          }
        ],
        series: [
          {
            data: [
              10,
              20,
              40,
              30,
              80,
              100,
              10,
              20,
              40,
              30,
              80,
              100,
              10,
              20,
              40,
              30,
              80,
              100,
              10,
              20,
              40,
              30,
              80,
              100
            ],
            type: "line",
            smooth: true,
            areaStyle: {
              //渐变背景
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c0d1f7"
                  },
                  {
                    offset: 1,
                    color: "#fff"
                  }
                ])
              }
            }
          }
        ]
      };
      balanceEchart.setOption(option);
      window.addEventListener("resize", function() {
      balanceEchart.resize();
      });
    },
    wealthMains() {
      let myChart = echarts.init(document.getElementById("wealthMain2"));
      // 绘制本月每天积分数据
      let option = {
        title: {
          text: "本月每天积分数据"
        },
        tooltip: {
          trigger: "axis"
        },
        color: ["#cccccc"],
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#16c4c9"
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1d",
              "2d",
              "3d",
              "4d",
              "5d",
              "6d",
              "7d",
              "8d",
              "9d",
              "10d",
              "11d",
              "12d",
              "13d",
              "14d",
              "15d",
              "16d",
              "17d",
              "18d",
              "19d",
              "20d",
              "21d",
              "22d",
              "23d",
              "24d",
              "25d",
              "26d",
              "27d",
              "28d",
              "29d",
              "30d",
              "31d"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "￥{value}"
            }
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: 10,
            itemStyle: {
              emphasis: {
                color: "#39d8a2"
              }
            },
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              362.2,
              32.6,
              20.0,
              6.4,
              3.3,
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
              76.7,
              135.6,
              162.2,
              76.7,
              135.6,
              162.2,
              200
            ]
          }
        ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
      myChart.resize();
      });
    },
    hideSystemPopup() {
      //关闭
      this.wealthshow1 = false;
      this.wealthshow2 = false;
      this.wealthshow3 = false;
      this.wealthshow4 = false;
      this.wealthshow5 = false;
      this.wealthshow6 = false;
      this.wealthshow7 = false;
      this.wealthshow8 = false;
      this.wealthshow9 = false;
      this.wealthshow10 = false;
    },
    //提现
    withdrawals() {
      this.wealthshow1 = true;
      this.wealthshow2 = false;
    },
    withdrawalss() {
      this.wealthshow1 = false;
      this.wealthshow2 = true;
    },
    //充值
    recharge() {
      this.wealthshow3 = true;
    },
    //转账
    transfer() {
      this.wealthshow4 = true;
      this.wealthshow5 = false;
    },
    transfers() {
      this.wealthshow4 = false;
      this.wealthshow5 = true;
    },
    addCard() {
      //添加银行卡
      this.wealthshow10 = true;
    },
    cardAdd(){
       this.wealthshow9 = true;
       this.wealthshow10 = false;
    },
    bankLeft() {
      if (this.cardsId >= 1) {
        this.cardsId--;
      } else {
        console.log(1);
      }
    },
    bankRight() {
      let lengths = document.getElementsByClassName("bank-card").length;
      if (this.cardsId < lengths - 1) {
        this.cardsId++;
      }
    },
    //积分转赠
    donation() {
      this.wealthshow7 = true;
      this.wealthshow8 = false;
    },
    donations() {
      this.wealthshow7 = false;
      this.wealthshow8 = true;
    },
    //新增银行卡输入数字
    addBanks() {}
  },
  watch: {
    cardNum1() {
      if (this.cardNum1.length == 4) {
        this.$refs["input2"].focus();
      }
    },
    cardNum2() {
      if (this.cardNum2.length == 4) {
        this.$refs["input3"].focus();
      }
    },
    cardNum3() {
      if (this.cardNum3.length == 4) {
        this.$refs["input4"].focus();
      }
    }
  }
};
</script>

<style lang="less" >
@import "../css/wealth.less";
</style>


